<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.min.2.1.1.js"></script>
		<script src="js/ajax.js"></script>
		
		<style>
		
			.green{
				background-color: green;
			}
		
			.mywith{
				width: 800px;
				text-align: center;
				
				margin: 20px auto;
				/* border:  1px solid red; */
			}
			
			#myheader{
				font-size: 25px;
			}
			
			.mytable{
				width: 800px;
				
			}
			.mytable th{
				border: 1px solid black;
			}
			
			.mytable td{
				border: 1px solid black;
			}
			
			#abc{
				background-color: aqua;
			}
		</style>
	</head>
	<body>
		
		
		<div class="mywith">
				<span id="myheader">记账管理</span>
		</div>
		
		<div class="mywith">
				<span>
					类型：
					<select id="typeId">
						<option value="1">支出</option>
						<option value="2">收入</option>
						<option value="3">转账</option>
						<option value="4">借出</option>
					</select>
				</span>
				
				<span>
					时间：
					从<input  type="date" id="beginDate" />
					到<input  type="date" id="endDate" />
				</span>
				
				<span>
					<input type="button" value="搜索" onclick="search()" />
					<input type="button" value="记账" onclick="add()" />
				</span>
		</div>
		
		<div class="mywith">
			<table class="mytable" cellpadding="0" cellspacing="0">
				
				<tr id="abc">
					<th>标题</th>
					<th>记账时间</th>
					<th>类别</th>
					<th>金额</th>
					<th>说明</th>
				</tr>
				<tbody id="scott">
					<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
				</tbody>
			</table>
		</div>
		
		<script>
		
			//当页面加载完毕后 应该要显示所有的数据
			
			$(function(){
				//3 发送ajax请求到后台
				// 2.1、准备发送ajax请求的数据
				var url=getRoot()+"bills/list";
				var method='GET';
				var callback=function(backData){
					var code = backData.code;
					if(code === '200'){
						$('#scott').text('');
						
						var array = backData.data;
						
						var lenth= array.length;
						
						if(lenth==0){
							var tr='<tr><td colspan="5">没有找到任何信息</td></tr>';
							$('#scott').append($(tr));
						}
						
						for(var index=0;index<array.length;index++){
							var entity = array[index];
							
							var price = entity.price;
							price = parseInt(price);
							
							if(price>0){
								price = "+"+price;
							}
							
							var tr='';
							if(index%2==0){
								tr='<tr class="green"><td>'+entity.title+'</td><td>'+entity.billTime+'</td><td>'+entity.typeName+'</td><td>'+price+'元</td><td>'+entity.explains+'</td></tr>';
							}else{
								tr='<tr><td>'+entity.title+'</td><td>'+entity.billTime+'</td><td>'+entity.typeName+'</td><td>'+price+'元</td><td>'+entity.explains+'</td></tr>';
							}
							// 把tr拼出来
							$('#scott').append($(tr));
							
						}
						
					}
				}
				
				// 2.2、这里才是真的发送ajax请求
				send(url,method,'',callback);
				
			});
			
		
			function search(){
				
				//1 拿到页面的参数  [3个]
				var typeId = $('#typeId').val();
				var beginDate = $('#beginDate').val();
				var endDate = $('#endDate').val();
				
				//2 封装单个的属性 成  1个 json对象
				
				var dto={
					typeId:typeId,
					beginDate:beginDate,
					endDate:endDate
				};
				
				//3 发送ajax请求到后台
				// 2.1、准备发送ajax请求的数据
				var url=getRoot()+"bills/list";
				var method='GET';
				var callback=function(backData){
					var code = backData.code;
					if(code === '200'){
						$('#scott').text('');
						
						var array = backData.data;
						
						var lenth= array.length;
						
						if(lenth==0){
							var tr='<tr><td colspan="5">没有找到任何信息</td></tr>';
							$('#scott').append($(tr));
						}
						
						for(var index=0;index<array.length;index++){
							var entity = array[index];
							
							var price = entity.price;
							price = parseInt(price);
							
							if(price>0){
								price = "+"+price;
							}
							var tr='';
							if(index%2==0){
								tr='<tr class="green"><td>'+entity.title+'</td><td>'+entity.billTime+'</td><td>'+entity.typeName+'</td><td>'+price+'元</td><td>'+entity.explains+'</td></tr>';
							}else{
								tr='<tr><td>'+entity.title+'</td><td>'+entity.billTime+'</td><td>'+entity.typeName+'</td><td>'+price+'元</td><td>'+entity.explains+'</td></tr>';
							}
							// 把tr拼出来
							$('#scott').append($(tr));
							
						}
						
					}
				}
				
				// 2.2、这里才是真的发送ajax请求
				send(url,method,dto,callback);
			}
			
			function add(){
				window.location.href="bills-add.html";
			}
		</script>
	</body>
</html>
